<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          房间信息
          <el-tag type="success" class="add" @click="add">添加房间</el-tag>
        </div>
      </el-col>
    </el-row>
    <template>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="房间类型" width="100"></el-table-column>
        <el-table-column prop="name" label="房间类型名" width="100"></el-table-column>
        <el-table-column prop="price" label="价格/元"></el-table-column>
        <el-table-column prop="total" label="总量/间"></el-table-column>
        <el-table-column prop="num" label="剩余/间"></el-table-column>
        <el-table-column prop="img" label="图片">
          <img src="img" width="50px" height="50px" />
        </el-table-column>
        <el-table-column prop="description" label="描述" width="180"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-tag size="small" class="update" @click="update(scope.row)">修改房间</el-tag>
            <el-tag
              type="danger"
              size="small"
              class="delete"
              @click="remove(scope.row.id,scope.row)"
            >删除房间</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="page"
        :total="total"
        :page-size="pageSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      page: 1,
      pageSize: 2,
      tableData: [],
    };
  },
  created() {
    this.$http({
      url: "/RoomType/getAll",
      method: "get",
      params: this.tableData,
    }).then((res) => {
      console.log(res);
      this.tableData = res;
      this.total = res.length;
      console.log(this.total);
    });
  },
  methods: {
    add() {
      this.$router.push({
        path: "/add",
      });
    },
    update(row) {
      this.$router.push({
        path: "/update",
        query: {
          row: JSON.stringify(row),
        },
      });
    },
    remove(id, row) {
      let it = this.tableData.indexOf(row);
      this.$confirm(`确定要删除【${row.id}】吗？`, "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: "RoomType/delete",
            method: "get",
            params: { id },
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.tableData.splice(it, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
html,
body {
  margin: 0;
  padding: 0;
}
.add {
  float: right;
  margin: 20px 50px;
  text-align: center;
  text-indent: 0px;
  cursor: pointer;
}
.update {
  margin-right: 20px;
  margin-left: 5px;
  cursor: pointer;
}
.delete {
  cursor: pointer;
}
.bg-purple-dark {
  background-color: rgb(64, 158, 255);
  height: 70px;
  width: 103%;
  font-size: 20px;
  line-height: 70px;
  text-indent: 20px;
  margin-top: -20px;
  margin-left: -20px;
}
.paging {
  margin-top: 50px;
}
</style>